<template>
	<view class="wanl-money">
		<view class="wechat-tips" v-if="is_wechat">
			<text class="text">点击右上角按钮，然后在弹出的菜单中，点击在浏览器中打开，即可跳转支付宝</text>
			<image src="@/static/images/wechat-tips.png" class="img"></image>
		</view>
		<view class="alipay-content">
			<image src="@/static/images/alipay-ioc.png" class="ioc"></image>
			<text class="alipay-tit">支付宝</text>
			<view class="amount-col">
				<text class="num">{{price}}</text>
				<text class="label">待支付金额(元)</text>
			</view>
			<view class="btn-group">
				<button class="btn" @click="openPay()">打开支付宝</button>
				<button class="btn-query" @click="queryOrder()">我已支付</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: null,
				price: null,
				pay_data: null,
				order_type: "",
				payNum: "",
				is_wechat: false,

			};
		},

		onLoad(option) {
			const paydata = JSON.parse(decodeURIComponent(option.url))
			this.order_id = paydata.order_id
			this.price = paydata.price
			this.pay_data = paydata.url
			this.order_type = paydata.order_type
			this.payNum = paydata.payNum
		},
		mounted() {
			if (this.$jssdk.isWechat()) {
				console.log("微信");
				this.is_wechat = true
			} else {
				console.log("非微信");
				this.is_wechat = false
				setTimeout(() => {
					this.openPay()
				}, 50)
			}
		},
		methods: {
			openPay() {
				if (this.$jssdk.isWechat()) {
					return false
				}
				if (this.order_type === 'goods') {
					this.$store.commit('statistics/order', {
						pay: this.$wanlshop.bcsub(this.$store.state.statistics.order.pay, this.payNum),
						delive: this.$wanlshop.bcadd(this.$store.state.statistics.order.delive, this.payNum)
					});
				}
				window.location.href = this.pay_data
				// window.open(this.pay_data)
				// document.write(this.pay_data);
			},
			queryOrder() {
				let url = ""
				if (this.order_type === 'goods') {
					url = '/wanlshop/order/getOrderInfo'
				} else {
					url = '/wanlshop/groups/order/getOrderInfo'
				}
				uni.request({
					url: url,
					data: {
						id: this.order_id
					},
					success: res => {
						// 订单状态:1=待支付,2=待成团,3=待发货,4=待收货,5=待评论,6=已完成,7=已取消
						// 订单状态:1=待支付,2=待发货,3=待收货,4=待评论,5=售后订单(已弃用),6=已完成,7=已取消
						if (res.data.state > 1 && res.data.state < 7) {
							// 支付成功
							uni.showToast({
								title: "支付成功"
							})
							setTimeout(() => {
								uni.switchTab({
									url: `/pages/user`
								})
								setTimeout(() => {
									uni.navigateTo({
										url: `/pages/user/order/details?id=${this.order_id}`
									})
								}, 30)
							}, 800)
						} else {
							uni.showToast({
								icon: "error",
								title: "未支付"
							})

						}

					}
				});
			}
		}
	};
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.wanl-money {
		height: 100%;
		background: url("@/static/images/alipay-bg.png");
		background-size: cover;
		display: flex;
		flex-direction: column;
	}

	.wechat-tips {
		display: flex;
		background: #343434;
		padding-left: 60rpx;
		padding-right: 40rpx;
		padding-top: 20rpx;
		padding-bottom: 48rpx;

		.text {
			flex: 1;
			color: #979797;
			font-size: 28rpx;
			margin-top: 30rpx;
			padding-right: 14rpx;
		}

		.img {
			width: 60rpx;
			height: 68rpx;
		}
	}

	.alipay-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-bottom: 10vh;

		.ioc {
			width: 128rpx;
			height: 128rpx;
		}

		.alipay-tit {
			font-size: 40rpx;
			color: #000000;
			margin-top: 10rpx;
		}

		.amount-col {
			display: flex;
			flex-direction: column;
			align-items: center;

			.num {
				font-size: 60rpx;
				color: #009FE8;
				font-weight: bold;
				margin-top: 10vh;
			}

			.label {
				font-size: 28rpx;
				color: #2B2B2B;
				margin-top: 10rpx;
			}
		}

		.btn-group {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 10vh;

			.btn {
				width: 368rpx;
				border-radius: 100px;
				background-color: #009FE8;
				height: 90rpx;
				line-height: 90rpx;
				color: #ffffff;
				font-size: 36rpx;
				font-weight: bold;
			}

			.btn-query {
				width: 368rpx;
				border-radius: 100px;
				background-color: #ffffff;
				height: 90rpx;
				height: 90rpx;
				color: #009FE8;
				font-size: 36rpx;
				font-weight: bold;
				border: 1px solid #009FE8;
				margin-top: 20rpx;
			}
		}
	}
</style>